<template>
  <BaseModal
    :model-value="modelValue"
    @update:model-value="emit('update:modelValue', $event)"
    :title="isEdit ? '编辑题目' : '新增题目'"
    width="1000px"
    @confirm="handleSubmit"
    @close="handleClose"
  >
    <!-- 只保留导入按钮 -->
    <div class="mb-4 flex justify-end">
      <a-button type="primary" @click="showImportModal = true">
        <upload-outlined /> 一键导入
      </a-button>
    </div>

    <a-form :model="formData" class="topic-form">
      <!-- 添加ID输入框 -->
      <div class="flex items-center gap-4 mb-6">
        <a-form-item label="题目ID" class="mb-0">
          <a-input
            v-model:value="formData.id"
            placeholder="请输入题目ID"
            class="w-[300px]"
          />
        </a-form-item>
      </div>

      <!-- 题目名称和难度 -->
      <div class="flex items-center gap-4 mb-6">
        <a-form-item label="题目名称" required class="mb-0">
          <a-input
            v-model:value="formData.title"
            placeholder="请输入题目名称"
            class="w-[300px]"
          />
        </a-form-item>
        <a-form-item label="难度" required class="mb-0">
          <a-select
            v-model:value="formData.difficulty"
            placeholder="请选择难度"
            class="w-[120px]"
            :options="difficultyOptions"
          />
        </a-form-item>
      </div>

      <!-- 新增题目类型和题库选择 -->
      <div class="flex items-center gap-4 mb-6">
        <a-form-item label="题目类型" required class="mb-0">
          <a-checkbox-group
            v-model:value="formData.types"
            :options="typeSelectOptions"
            class="flex flex-wrap gap-2"
          />
        </a-form-item>
        <a-form-item label="所属题库" required class="mb-0">
          <a-checkbox-group
            v-model:value="formData.repositories"
            :options="repositoryOptions"
            class="flex flex-wrap gap-2"
          />
        </a-form-item>
      </div>

      <!-- 修改题目内容和解释的布局 -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <a-form-item label="题目内容" required>
          <a-textarea
            v-model:value="formData.content"
            placeholder="请输入题目内容"
            :rows="4"
            class="w-full"
          />
        </a-form-item>
        <a-form-item label="题目解释" required>
          <a-textarea
            v-model:value="formData.explain"
            placeholder="请输入题目解释"
            :rows="4"
            class="w-full"
          />
        </a-form-item>
      </div>

      <!-- 表单列表 -->
      <div
        v-for="(table, tableIndex) in formData.tables"
        :key="tableIndex"
        class="mb-6 border border-gray-200 p-6 rounded-lg bg-white shadow-sm"
      >
        <!-- 表名称 -->
        <div class="flex items-center mb-2 gap-4">
          <a-form-item label="表名称" required class="mb-0">
            <a-input
              v-model:value="table.tableName"
              placeholder="请输入表名称"
              class="w-[300px]"
            />
          </a-form-item>
          <a-form-item label="表描述" required class="mb-0">
            <a-input
              v-model:value="table.description"
              placeholder="请输入表描述"
              class="w-[300px]"
            />
          </a-form-item>
          <a-button
            type="link"
            danger
            @click="removeTable(tableIndex)"
            v-if="tableIndex > 0"
          >
            <delete-outlined /> 删除表
          </a-button>
        </div>

        <!-- 字段列表 -->
        <div class="bg-gray-50 p-4 rounded-lg">
          <div class="grid grid-cols-12 gap-4 mb-4 font-medium text-gray-600">
            <div class="col-span-3">字段名</div>
            <div class="col-span-3">类型</div>
            <div class="col-span-4">说明</div>
            <div class="col-span-2">操作</div>
          </div>

          <div
            v-for="(field, fieldIndex) in table.fields"
            :key="fieldIndex"
            class="grid grid-cols-12 gap-4 mb-3 items-center"
          >
            <div class="col-span-3">
              <a-input
                v-model:value="field.name"
                placeholder="请输入字段名"
                class="field-input"
              />
            </div>
            <div class="col-span-3">
              <a-select
                v-model:value="field.type"
                placeholder="请选择类型"
                :options="typeOptions"
                class="field-select"
              />
            </div>
            <div class="col-span-4">
              <a-input
                v-model:value="field.description"
                placeholder="请输入说明"
                class="field-input"
              />
            </div>
            <div class="col-span-2">
              <a-button
                type="link"
                @click="addField(tableIndex)"
                v-if="fieldIndex === 0"
                class="field-button"
              >
                添加
              </a-button>
              <a-button
                type="link"
                danger
                @click="removeField(tableIndex, fieldIndex)"
                v-else
                class="field-button"
              >
                删除
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 新增表按钮 -->
      <div class="text-center mt-6 mb-8">
        <a-button type="dashed" @click="addTable" class="w-[200px]">
          新增表
        </a-button>
      </div>

      <!-- 测试用例区域 -->
      <div class="border-t border-gray-200 pt-6">
        <div class="flex justify-between items-center mb-4">
          <div class="text-lg font-medium">测试用例</div>
          <a-button type="link" @click="addNewCase">
            <plus-outlined /> 新增测试用例
          </a-button>
        </div>

        <!-- 测试用例组 -->
        <div
          v-for="(testCase, caseIndex) in testCases"
          :key="caseIndex"
          class="mb-8"
        >
          <div
            class="flex items-center justify-between mb-4 bg-blue-50 p-3 rounded-t-lg"
          >
            <div class="font-medium text-blue-800">
              Case {{ caseIndex + 1 }}
            </div>
            <a-button
              type="link"
              danger
              @click="removeCase(caseIndex)"
              v-if="caseIndex !== 0"
            >
              <delete-outlined /> 删除用例
            </a-button>
          </div>

          <!-- 表数据列表 -->
          <div class="border-b border-gray-200 pb-6 mb-6">
            <div class="text-gray-700 font-medium mb-3">输入数据：</div>
            <div
              v-for="(table, tableIndex) in formData.tables"
              :key="tableIndex"
            >
              <div class="mb-6 bg-gray-50 p-6 rounded-lg">
                <div class="flex items-center mb-4">
                  <div class="font-medium">
                    {{ table.tableName || `表${tableIndex + 1}` }}
                  </div>
                </div>

                <!-- 表格头部 -->
                <div class="flex mb-2 font-medium text-gray-600">
                  <div
                    v-for="field in table.fields"
                    :key="field.name"
                    class="w-[300px] mr-4"
                  >
                    {{ field.name || "未命名字段" }}
                  </div>
                  <div class="w-[80px]">操作</div>
                </div>

                <!-- 数据行区域 -->
                <div>
                  <div
                    v-for="(row, rowIndex) in testCase.data[tableIndex]
                      ?.rows || [{}]"
                    :key="rowIndex"
                    class="flex mb-2 items-center"
                  >
                    <div
                      v-for="field in table.fields"
                      :key="field.name"
                      class="w-[300px] mr-4"
                    >
                      <a-input
                        v-model:value="row[field.name]"
                        :placeholder="`请输入${field.name || '数据'}`"
                        class="w-full"
                      />
                    </div>
                    <div class="w-[80px] flex">
                      <a-button
                        type="link"
                        @click="addInputRow(caseIndex, tableIndex)"
                        v-if="rowIndex === 0"
                      >
                        <plus-outlined /> 添加
                      </a-button>
                      <a-button
                        type="link"
                        danger
                        @click="removeInputRow(caseIndex, tableIndex, rowIndex)"
                        v-else
                      >
                        <delete-outlined /> 删除
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 输出数据区域 -->
          <div>
            <div class="text-gray-700 font-medium mb-3">输出数据：</div>
            <div class="mb-6 bg-gray-50 p-6 rounded-lg">
              <!-- 输出表格 -->
              <div>
                <!-- 列头区域（固定宽度的网格布局） -->
                <div class="flex items-center mb-4">
                  <div class="grid grid-flow-col gap-4" style="min-width: 0">
                    <div
                      v-for="(col, colIndex) in testCase.output.columns"
                      :key="colIndex"
                      class="w-[200px]"
                    >
                      <div class="flex items-center">
                        <a-input
                          v-model:value="col.name"
                          placeholder="列名"
                          class="w-full"
                        />
                        <a-button
                          v-if="colIndex !== 0"
                          type="link"
                          danger
                          size="small"
                          @click="removeOutputColumn(caseIndex, colIndex)"
                        >
                          <delete-outlined />
                        </a-button>
                      </div>
                    </div>
                  </div>
                  <a-button
                    type="link"
                    @click="addOutputColumn(caseIndex)"
                    class="ml-4"
                  >
                    <plus-outlined /> 添加列
                  </a-button>
                </div>

                <!-- 数据行区域 -->
                <div
                  v-for="(row, rowIndex) in testCase.output.rows"
                  :key="rowIndex"
                  class="flex items-center mb-3"
                >
                  <div class="grid grid-flow-col gap-4" style="min-width: 0">
                    <div
                      v-for="col in testCase.output.columns"
                      :key="col.name"
                      class="w-[200px]"
                    >
                      <a-input
                        v-model:value="row[col.name]"
                        placeholder="请输入"
                        class="w-full"
                      />
                    </div>
                  </div>
                  <div class="ml-4 flex-shrink-0">
                    <a-button
                      type="link"
                      @click="addOutputRow(caseIndex)"
                      v-if="rowIndex === 0"
                    >
                      <plus-outlined /> 添加行
                    </a-button>
                    <a-button
                      type="link"
                      danger
                      @click="removeOutputRow(caseIndex, rowIndex)"
                      v-else
                    >
                      <delete-outlined /> 删除
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-form>

    <!-- 在最底部添加一键导出按钮 -->
    <div class="flex justify-end mt-4 border-t border-gray-200 pt-4">
      <a-button type="primary" @click="handleExport">
        <download-outlined /> 一键导出当前数据
      </a-button>
    </div>

    <!-- 添加导入弹窗 -->
    <a-modal
      v-model:visible="showImportModal"
      title="导入题目数据"
      width="800px"
      @ok="handleImport"
      @cancel="showImportModal = false"
    >
      <div class="flex flex-col gap-4">
        <div class="text-gray-600 text-sm">请输入符合格式的 JSON 数据：</div>
        <a-textarea
          v-model:value="importData"
          :rows="15"
          placeholder="请输入JSON数据"
          class="font-mono text-sm"
        />
      </div>
    </a-modal>
  </BaseModal>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
import {
  DeleteOutlined,
  PlusOutlined,
  OrderedListOutlined,
  UploadOutlined,
  DownloadOutlined,
} from "@ant-design/icons-vue";
import { Form, Input, Select, Button, Checkbox, message } from "ant-design-vue";
import BaseModal from "@/components/common/BaseModal.vue";
import { topicApi } from "@/api/backend/topicManagement.js";

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  editData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:modelValue", "success"]);

const difficultyOptions = [
  { label: "简单", value: 0 },
  { label: "中等", value: 1 },
  { label: "困难", value: 2 },
];

const typeSelectOptions = ref([
  // 可以添加一些默认选项，等接口数据加载完成后会被替换
]);

const repositoryOptions = ref([]);

const formData = ref({
  id: "", // 添加id字段
  title: "",
  difficulty: undefined,
  content: "",
  explain: "",
  types: [], // 确保初始化为空数组
  repositories: [],
  tables: [
    {
      tableName: "",
      description: "",
      fields: [{ name: "", type: undefined, description: "" }],
      testData: [{}],
    },
  ],
});

const typeOptions = [
  { label: "VARCHAR", value: "varchar" },
  { label: "INT", value: "int" },
  { label: "BIGINT", value: "bigint" },
  { label: "DECIMAL", value: "decimal" },
  { label: "DOUBLE", value: "double" },
  { label: "FLOAT", value: "float" },
  { label: "TEXT", value: "text" },
  { label: "CHAR", value: "char" },
  { label: "DATE", value: "date" },
  { label: "DATETIME", value: "datetime" },
  { label: "TIMESTAMP", value: "timestamp" },
  { label: "BOOLEAN", value: "boolean" },
  { label: "TINYINT", value: "tinyint" },
  { label: "SMALLINT", value: "smallint" },
  { label: "MEDIUMINT", value: "mediumint" },
  { label: "TIME", value: "time" },
  { label: "YEAR", value: "year" },
  { label: "JSON", value: "json" },
];

const testCases = ref([
  {
    data: formData.value.tables.map(() => ({
      rows: [{}], // 为每个表添加rows数组
    })),
    output: {
      columns: [{ name: "" }],
      rows: [{}],
    },
  },
]);

// 添加导入相关的响应式变量
const showImportModal = ref(false);
const importData = ref("");

watch(
  () => props.editData,
  (newVal) => {
    if (newVal && Object.keys(newVal).length > 0) {
      formData.value = {
        ...newVal,
        types: Array.isArray(newVal.types)
          ? newVal.types.map((t) => parseInt(t)) // 转换为数字
          : [],
        repositories: Array.isArray(newVal.repositories)
          ? newVal.repositories.map((r) => parseInt(r)) // 转换为数字
          : [],
      };
    }
  },
  { deep: true, immediate: true }
);

// 添加value类型变化的监听，用于调试
watch(
  () => formData.value.types,
  (newVal) => {
    console.log("types值变化:", newVal);
  },
  { deep: true }
);

// 获取题目类型
const loadTopicTypes = async () => {
  try {
    const response = await topicApi.getTopicTypes();
    console.log("获取到的题目类型:", response); // 调试日志
    if (response.code === 200) {
      // 注意这里直接访问 response
      typeSelectOptions.value = response.data.map((type) => ({
        label: type.name,
        value: parseInt(type.id), // 转换为数字
        style: { marginRight: "8px" }, // 添加样式间距
      }));
      console.log("处理后的选项:", typeSelectOptions.value);
    }
  } catch (error) {
    console.error("获取题目类型失败:", error);
    message.error("获取题目类型失败");
  }
};

// 获取题库列表
const loadBankList = async () => {
  try {
    const response = await topicApi.getBankList();
    if (response.code === 200) {
      repositoryOptions.value = response.data.map((bank) => ({
        label: bank.name,
        value: parseInt(bank.id), // 转换为数字
        style: { marginRight: "8px" },
      }));
    }
  } catch (error) {
    console.error("获取题库列表失败:", error);
    message.error("获取题库列表失败");
  }
};

onMounted(() => {
  loadTopicTypes();
  loadBankList();
});

// 添加新表
const addTable = () => {
  const newTable = {
    tableName: "",
    description: "", // 添加表描述字段
    fields: [{ name: "", type: undefined, description: "" }],
    testData: [{}],
  };
  formData.value.tables.push(newTable);

  // 同时更新所有测试用例的数据结构
  testCases.value.forEach((testCase) => {
    testCase.data.push({ rows: [{}] });
  });
};

// 删除表
const removeTable = (tableIndex) => {
  formData.value.tables.splice(tableIndex, 1);
  // 同时更新所有测试用例的数据结构
  testCases.value.forEach((testCase) => {
    testCase.data.splice(tableIndex, 1);
  });
};

// 添加字段
const addField = (tableIndex) => {
  formData.value.tables[tableIndex].fields.push({
    name: "",
    type: undefined,
    description: "",
  });
};

// 删除字段
const removeField = (tableIndex, fieldIndex) => {
  formData.value.tables[tableIndex].fields.splice(fieldIndex, 1);
};

// 添加测试用例
const addNewCase = () => {
  testCases.value.push({
    data: formData.value.tables.map(() => ({
      rows: [{}], // 初始化每个表的行数据
    })),
    output: {
      columns: [{ name: "" }],
      rows: [{}],
    },
  });
};

// 删除测试用例
const removeCase = (caseIndex) => {
  testCases.value.splice(caseIndex, 1);
};

// 清空某个表的数据
const clearCaseData = (caseIndex, tableIndex) => {
  testCases.value[caseIndex].data[tableIndex].rows = [{}];
};

// 添加输入数据行
const addInputRow = (caseIndex, tableIndex) => {
  if (!testCases.value[caseIndex].data[tableIndex].rows) {
    testCases.value[caseIndex].data[tableIndex].rows = [];
  }
  testCases.value[caseIndex].data[tableIndex].rows.push({});
};

// 删除输入数据行
const removeInputRow = (caseIndex, tableIndex, rowIndex) => {
  testCases.value[caseIndex].data[tableIndex].rows.splice(rowIndex, 1);
};

// 简化输出相关方法
const addOutputColumn = (caseIndex) => {
  testCases.value[caseIndex].output.columns.push({ name: "" });
  // 为每一行添加新列的空值
  testCases.value[caseIndex].output.rows.forEach((row) => {
    row[`col${Date.now()}`] = "";
  });
};

const removeOutputColumn = (caseIndex, colIndex) => {
  const columnName = testCases.value[caseIndex].output.columns[colIndex].name;
  testCases.value[caseIndex].output.columns.splice(colIndex, 1);
  // 从每一行中删除对应的列数据
  testCases.value[caseIndex].output.rows.forEach((row) => {
    delete row[columnName];
  });
};

const addOutputRow = (caseIndex) => {
  const newRow = {};
  testCases.value[caseIndex].output.columns.forEach((col) => {
    newRow[col.name] = "";
  });
  testCases.value[caseIndex].output.rows.push(newRow);
};

const removeOutputRow = (caseIndex, rowIndex) => {
  testCases.value[caseIndex].output.rows.splice(rowIndex, 1);
};

// 修改formatTestCases方法，清理不需要的col字段
const formatTestCases = (testCases) => {
  return testCases.map((testCase) => ({
    data: testCase.data.map((tableData) => {
      const rowsObject = {};
      tableData.rows.forEach((row, index) => {
        rowsObject[`row${index + 1}`] = row;
      });
      return rowsObject;
    }),
    output: {
      columns: testCase.output.columns,
      rows: testCase.output.rows.map((row) => {
        // 创建一个新对象，只保留columns中定义的字段
        const cleanedRow = {};
        testCase.output.columns.forEach((col) => {
          if (col.name) {
            cleanedRow[col.name] = row[col.name] || "";
          }
        });
        return cleanedRow;
      }),
    },
  }));
};

// 修改提交方法，调整数据结构
const handleSubmit = async () => {
  try {
    if (!formData.value.title?.trim()) {
      message.warning("请输入题目名称");
      return;
    }
    if (formData.value.difficulty === undefined) {
      message.warning("请选择题目难度");
      return;
    }
    if (!formData.value.content?.trim()) {
      message.warning("请输入题目内容");
      return;
    }
    if (!formData.value.explain?.trim()) {
      message.warning("请输入题目解释");
      return;
    }

    if (!formData.value.types?.length) {
      message.warning("请选择题目类型");
      return;
    }

    if (!formData.value.repositories?.length) {
      message.warning("请选择所属题库");
      return;
    }

    // 验证表单数据
    const isValid = formData.value.tables.every((table) => {
      if (!table.tableName?.trim()) {
        message.warning("请输入表名称");
        return false;
      }
      if (!table.description?.trim()) {
        message.warning("请输入表描述");
        return false;
      }
      return table.fields.every((field) => {
        if (!field.name?.trim()) {
          message.warning("请输入字段名");
          return false;
        }
        if (!field.type) {
          message.warning("请选择字段类型");
          return false;
        }
        return true;
      });
    });

    if (!isValid) return;

    const formattedTestCases = formatTestCases(testCases.value);

    const submitData = {
      ...formData.value,
      testCases: formattedTestCases,
    };

    if (props.isEdit) {
      submitData.id = formData.value.id;
      await topicApi.update(submitData);
      message.success("修改成功");
    } else {
      await topicApi.create(submitData);
      message.success("新增成功");
    }

    emit("success");
    handleClose();
  } catch (error) {
    console.error("操作失败:", error);
    message.error(error.message || "操作失败");
  }
};

// 修改重置方法
const handleClose = () => {
  formData.value = {
    id: "", // 重置id
    title: "",
    difficulty: undefined, // 重置难度
    content: "", // 重置题目内容
    explain: "", // 重置题目解释
    types: [], // 重置题目类型
    repositories: [], // 重置所属题库
    tables: [
      {
        tableName: "",
        description: "", // 添加表描述字段
        fields: [{ name: "", type: undefined, description: "" }],
        testData: [{}],
      },
    ],
  };
  testCases.value = [
    {
      data: formData.value.tables.map(() => ({
        rows: [{}], // 初始化每个表的行数据
      })),
      output: {
        columns: [{ name: "" }],
        rows: [{}],
      },
    },
  ];
  emit("update:modelValue", false);
};

// 修改handleImport中的数据转换逻辑
const handleImport = () => {
  try {
    const cleanJson = importData.value.replace(/\/\/.*/g, "").trim();
    const data = JSON.parse(cleanJson);

    // 验证数据结构
    if (
      !data.title ||
      data.difficulty === undefined ||
      !Array.isArray(data.tables) ||
      !Array.isArray(data.testCases)
    ) {
      throw new Error(
        "数据格式不正确，请检查必要字段：title、difficulty、tables、testCases"
      );
    }

    // 更新表单数据
    formData.value = {
      id: data.id || "", // 更新id字段
      title: data.title,
      difficulty: data.difficulty,
      content: data.content,
      explain: data.explain,
      types: data.types || [],
      repositories: data.repositories || [],
      tables: data.tables,
    };

    // 转换测试用例数据结构
    const convertedTestCases = data.testCases.map((testCase) => ({
      data: testCase.data.map((tableData) => ({
        // 将对象格式转换为rows数组
        rows: Object.values(tableData).map((row) => ({ ...row })),
      })),
      output: {
        columns: testCase.output.columns || [{ name: "" }],
        rows: testCase.output.rows || [{}],
      },
    }));

    // 更新测试用例数据
    testCases.value = convertedTestCases;

    message.success("导入成功");
    showImportModal.value = false;
  } catch (error) {
    console.error("导入失败:", error);
    message.error("导入失败：" + error.message);
  }
};

// 修改导出方法，使用相同的数据转换逻辑
const handleExport = () => {
  try {
    const formattedTestCases = formatTestCases(testCases.value);

    // 构建导出数据
    const exportData = {
      id: formData.value.id, // 添加id字段
      title: formData.value.title,
      difficulty: formData.value.difficulty,
      content: formData.value.content, // 导出题目内容
      explain: formData.value.explain, // 导出题目解释
      types: formData.value.types, // 导出题目类型
      repositories: formData.value.repositories, // 导出所属题库
      tables: formData.value.tables.map((table) => ({
        tableName: table.tableName,
        description: table.description,
        fields: table.fields.map((field) => ({
          name: field.name,
          type: field.type,
          description: field.description,
        })),
      })),
      testCases: formattedTestCases,
    };

    // 转换为格式化的 JSON 字符串
    const jsonStr = JSON.stringify(exportData, null, 2);

    // 复制到剪贴板
    navigator.clipboard
      .writeText(jsonStr)
      .then(() => {
        message.success("数据已复制到剪贴板");
      })
      .catch(() => {
        // 如果剪贴板API不可用，创建一个临时文本区域
        const textarea = document.createElement("textarea");
        textarea.value = jsonStr;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
        message.success("数据已复制到剪贴板");
      });
  } catch (error) {
    console.error("导出失败:", error);
    message.error("导出失败");
  }
};
</script>

<style scoped>
.topic-form {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.field-input {
  width: 100%;
  border-radius: 4px;
}

.field-select {
  width: 100%;
  border-radius: 4px;
}

.field-button {
  padding: 4px 0;
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
  color: #374151;
}

:deep(.ant-input),
:deep(.ant-select-selector) {
  border-radius: 6px;
}

:deep(.ant-select-selector) {
  height: 32px !important;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-modal-content) {
  padding: 24px;
  border-radius: 12px;
}

:deep(.ant-modal-header) {
  margin-bottom: 24px;
}

:deep(.ant-modal-footer) {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

/* 添加测试数据相关样式 */
.test-data-section {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  margin-top: 24px;
}

:deep(.ant-input) {
  border-radius: 4px;
  height: 32px;
}

:deep(.ant-input:hover) {
  border-color: #1890ff;
}

:deep(.ant-input:focus) {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 添加导入相关样式 */
:deep(.ant-modal-body) {
  max-height: 80vh;
  overflow-y: auto;
}

:deep(.ant-input) {
  font-family: Consolas, Monaco, "Courier New", monospace;
}
</style>
